import React from 'react';
import { Card, Form, Input, InputNumber, Select, Switch, Button, Divider, Space, message } from 'antd';
import { useSelector } from 'react-redux';
import { RootState } from '@/store';

const { Option } = Select;
const { Item } = Form;

// 1. 定义表单值的类型接口
interface FormValues {
  username: string;
  fullName?: string;
  email?: string;
  theme: 'light' | 'dark' | 'auto';
  notifications: boolean;
  autoRefresh: boolean;
  refreshInterval: number;
  apiUrl?: string;  // 仅管理员可见
  mockEnabled?: boolean;  // 仅管理员可见
}

const SystemSettingsPage: React.FC = () => {
  const [form] = Form.useForm<FormValues>();
  const { user } = useSelector((state: RootState) => state.auth);

  // 初始化表单
  React.useEffect(() => {
    if (user) {
      form.setFieldsValue({
        username: user.username,
        theme: 'light',
        notifications: true,
        autoRefresh: false,
        refreshInterval: 30,
      });
    }
  }, [user, form]);

  const onFinish = (values: FormValues) => {
    console.log('Settings updated:', values);
    message.success('设置已保存');
  };

  return (
    <Card title="系统设置">
      <Form form={form} layout="vertical" onFinish={onFinish}>
        <Divider orientation="left">用户信息</Divider>
        
        <Item
          name="username"
          label="用户名"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input disabled={user?.role !== 'admin'} />
        </Item>
        
        <Item
          name="fullName"
          label="姓名"
        >
          <Input placeholder="请输入姓名" />
        </Item>
        
        <Item
          name="email"
          label="邮箱"
          rules={[{ type: 'email', message: '请输入正确的邮箱地址' }]}
        >
          <Input placeholder="请输入邮箱" />
        </Item>
        
        <Divider orientation="left">系统设置</Divider>
        
        <Item
          name="theme"
          label="主题模式"
          rules={[{ required: true }]}
        >
          <Select placeholder="请选择主题">
            <Option value="light">浅色模式</Option>
            <Option value="dark">深色模式</Option>
            <Option value="auto">跟随系统</Option>
          </Select>
        </Item>
        
        <Item
          name="notifications"
          label="通知提醒"
          valuePropName="checked"
        >
          <Switch checkedChildren="开启" unCheckedChildren="关闭" />
        </Item>
        
        <Item
          name="autoRefresh"
          label="自动刷新数据"
          valuePropName="checked"
        >
          <Switch checkedChildren="开启" unCheckedChildren="关闭" />
        </Item>
        
        <Item
          name="refreshInterval"
          label="刷新间隔(秒)"
          rules={[{ required: true, type: 'number', min: 10, max: 300 }]}
          shouldUpdate={(prevValues: FormValues, currentValues: FormValues) => 
          prevValues.autoRefresh !== currentValues.autoRefresh
        }
        >
          <InputNumber
            min={10} 
            max={300}
            step={10}
            disabled={!(form.getFieldValue('autoRefresh') ?? false)}
          />
        </Item>
        
        {user?.role === 'admin' && (
          <>
            <Divider orientation="left">管理员设置</Divider>
            
            <Item
              name="apiUrl"
              label="API接口地址"
              rules={[{ required: true }]}
            >
              <Input placeholder="请输入API接口地址" />
            </Item>
            
            <Item
              name="mockEnabled"
              label="启用模拟数据"
              valuePropName="checked"
            >
              <Switch checkedChildren="开启" unCheckedChildren="关闭" />
            </Item>
          </>
        )}
        
        <Item>
          <Space>
            <Button type="primary" htmlType="submit">
              保存设置
            </Button>
            <Button 
              onClick={() => form.resetFields()}
            >
              重置
            </Button>
          </Space>
        </Item>
      </Form>
    </Card>
  );
};

export default SystemSettingsPage;
    